<template>
    <div class="car">
        <h2>品牌：{{ brand }}</h2>
        <h2>颜色：{{ color }}</h2>
        <h2>价格：{{ price }}</h2>
        <button @click="changeBrand">修改品牌</button>
        <button @click="changeColor">修改颜色</button>
        <button @click="changePrice">修改价格</button>
    </div>
</template>

<script lang="ts" setup>
import { ref ,watch} from 'vue';
let brand = ref('小米Ultral')
let color = ref('Yellow')
let price = ref(32)


function changeBrand() {
    brand.value = '小米su7'
    console.log(brand)
}
function changeColor() {
    color.value = 'White'
    console.log(color)
}
function changePrice() {
    price.value += 1
    console.log(price)
}

/* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
const stopWatch = watch(price,(newValue,oldValue)=>{
    console.log('price变化了',newValue,oldValue)
    if(newValue >= 40){
      stopWatch()
    }
})

</script>

<style scoped>
.car button {
    margin: 5px 10px;
    padding: 10px 20px;
    color: white;
    background-color: #aaaaaa;
    border: none;
    border-radius: 10px;
    cursor: col-resize;
    font-size: 16px;
}

.car button:hover {
    background-color: coral;
}
</style>